<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>antdv6</title>
  </head>
  <body>
    <div id="container"></div>
    <!-- <script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script> -->
    <script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
    <script>
      const data = {
        // 节点
        nodes: [
          {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'hello', // String，节点标签
          },
          {
            id: 'node2', // String，节点的唯一标识
            shape: 'ellipse', // 使用 ellipse 渲染
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            // label: 'world', // String，节点标签
            attrs: {
              body: {
                fill: 'red',
                stroke: '#000',
                strokeDasharray: '10,2',
              },
              label: {
                text: 'Hello999',
                fill: '#888',
                fontSize: 13,
              },
            },
          },
        ],
        // 边
        edges: [
          {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
            // shape: 'shadow-edge',
            attrs: {
              line: {
                stroke: 'orange',
              },
            },
          },
        ],
      };

      const graph = new X6.Graph({
        container: document.getElementById('container'),
        panning: {
          enabled: true,
          modifiers: 'shift',
          // eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel'],
        },
        width: 800,
        height: 600,
        background: {
          color: '#fffbe6', // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      });
      const rect = new X6.Graph.Rect({
        id: 'node1',
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: 'rect',
        zIndex: 2,
      });

      const circle = new X6.Graph.Circle({
        id: 'node2',
        x: 280,
        y: 200,
        width: 60,
        height: 60,
        label: 'circle',
        zIndex: 2,
      });

      const edge = new X6.Graph.Edge({
        id: 'edge1',
        source: rect,
        target: circle,
        zIndex: 1,
      });

      // graph.fromJSON(data);
      graph.zoom(-0.5);
      graph.centerContent();

      // graph.translate(300, 40);

      // graph.toSVG((dataUri) => {
      //   // 下载
      //   DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg');
      // });
    </script>
  </body>
</html>
